<template>
  <div class="youhui">
  <div class="maincontent ">
    <div class="guide">
      <span>您当前位置：</span>
      <a href="/index.html">海豚彩票</a>
      <span>&gt;</span>
      <span>优惠活动</span>
    </div>
    <div class="promotions" >
      <div class="item">
        <a class="cover"><img v-on:click="show = !show" :src="firstUrl"></a>
        <img class="detail" v-if="show" :src="firstsUrl">          
      </div>
      <div class="item">
        <a class="cover"><img v-on:click="show2 = !show2" :src="secondUrl"></a>
        <img class="detail" v-if="show2" :src="secondsUrl">          
      </div>
      <div class="item">
        <a class="cover"><img v-on:click="show3 = !show3" :src="threeUrl"></a>
        <img class="detail" v-if="show3" :src="threesUrl">          
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'youhui',
  data () {
    return {
      firstUrl: '../../static/images/activity/1.jpg',
      firstsUrl: '../../static/images/activity/1s.jpg',
      secondUrl: '../../static/images/activity/2.jpg',
      secondsUrl: '../../static/images/activity/2s.jpg',
      threeUrl: '../../static/images/activity/3.jpg',
      threesUrl: '../../static/images/activity/3s.jpg',
      show: false,
      show2: false,
      show3: false
    }
  },
  methods: {
    bindswitch: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + event.target.childNodes + '!')
      var obj = event.target.childNodes;
      var cls = "hidden";
      var checkClass = obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 

      if(checkClass){
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
        obj.className = obj.className.replace(reg, ' ');  
      }else{
         obj.className += " " + cls; 
      }

      // $(".promotions .item .cover").next('img').toggleClass('hidden');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.maincontent{width: 1000px;margin: 0 auto;overflow: hidden;}

</style>
